import { useParams, useNavigate } from 'react-router-dom';
import { Button, Form, Input, Select, Upload, message } from 'antd';
import { useEffect, useState } from 'react';
import { getProductById, updateProduct } from '../../services/product';
import dayjs from 'dayjs';
import { UploadOutlined } from '@ant-design/icons';
import {Parser} from "mockjs/src/mock/regexp";
const { Option } = Select;

export default function ProductEdit() {
    const navigate = useNavigate();
    const { id } = useParams();
    const [form] = Form.useForm();
    const [product, setProduct] = useState({});

    const layout = {
        labelCol: {
            span: 8,
        },
        wrapperCol: {
            span: 16,
        },
    };

    const validateMessages = {
        required: '请输入${label}',
    };

    useEffect(() => {
        if (id) {
            getProductById(id).then((response) => {
                const { code, result } = response;
                if (code === 1 && result) {
                    setProduct(result);
                    form.setFieldsValue(result);
                }
            });
        }
    }, [id]);

    const onFinish = (values) => {
        const data = {
            ...product,
            id: id,
            ...values,
            // 价格为两位小数精度
            // price:parseFloat(values.price).toFixed(2),
            price:parseInt(values.price),
            stock:parseInt(values.stock),

        };

        updateProduct(id, data).then((response) => {
            const { code, msg } = response;
            if (code === 1) {
                message.success(msg);
                navigate('/product/');
            }
        });
    };

    const onImageChange = (info) => {
        if (info.file.status === 'done') {
            form.setFieldsValue({ details: info.file.response.path });
        }
    };
    // if (info.file.status === 'done') {
    //     // 将图片路径信息添加到表单字段中
    //     form.setFieldsValue({ ...form.getFieldsValue(), details: info.file.response.path });
    // }

    return (
        <Form
            {...layout}
            name="product-edit"
            form={form}
            onFinish={onFinish}
            style={{ maxWidth: '100%' }}
            validateMessages={validateMessages}
        >
            <Form.Item name="productName" label="商品名称" rules={[{ required: true }]}>
                <Input />
            </Form.Item>
            <Form.Item name="category" label="商品分类" rules={[{ required: true }]}>
                <Select placeholder="请选择商品分类">
                    <Option value="1.1">相机</Option>
                    <Option value="1.2">电脑</Option>
                    <Option value="1.3">平板</Option>
                    <Option value="1.4">耳机</Option>
                    <Option value="1.5">鼠标</Option>
                    <Option value="1.6">键盘</Option>
                    <Option value="2.1">小米</Option>
                    <Option value="2.2">华为</Option>
                    <Option value="2.3">苹果</Option>
                    <Option value="2.4">Vivo</Option>
                    <Option value="2.5">OPPO</Option>
                    <Option value="2.6">三星</Option>
                    <Option value="3.1">洗衣机</Option>
                    <Option value="3.2">冰箱</Option>
                    <Option value="3.3">微波炉</Option>
                    <Option value="3.4">燃气灶</Option>
                    <Option value="3.5">空调</Option>
                    <Option value="3.6">电饭煲</Option>
                </Select>
            </Form.Item>
            <Form.Item name="price" label="价格" rules={[{ required: true }]}>
                <Input type="number" />
            </Form.Item>
            <Form.Item name="stock" label="库存" rules={[{ required: true }]}>
                <Input type="number" />
            </Form.Item>
            <Form.Item name="description" label="商品描述">
                <Input.TextArea />
            </Form.Item>
            <Form.Item name="services" label="服务支持">
                <Select mode="multiple" placeholder="请选择服务支持">
                    <Option value="七天无理由退货">七天无理由退货</Option>
                    <Option value="退货运费险">退货运费险</Option>
                </Select>
            </Form.Item>
            {/*这里是上传图片的逻辑，暂时不用*/}
            {/*<Form.Item*/}
            {/*    name="details"*/}
            {/*    label="商品图片"*/}
            {/*    valuePropName="fileList"*/}
            {/*    getValueFromEvent={(e) => {*/}
            {/*        if (Array.isArray(e)) {*/}
            {/*            return e;*/}
            {/*        }*/}
            {/*        return e && e.fileList;*/}
            {/*    }}*/}
            {/*>*/}
            {/*    <Upload*/}
            {/*        name="image"*/}
            {/*        action="/api/upload"*/}
            {/*        listType="picture"*/}
            {/*        onChange={onImageChange}*/}
            {/*    >*/}
            {/*        <Button icon={<UploadOutlined />}>点击上传</Button>*/}
            {/*    </Upload>*/}
            {/*</Form.Item>*/}
            <Form.Item className="form-item" wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                <Button type="primary" className="submit-button" htmlType="submit">
                    {id ? '更新商品' : '添加商品'}
                </Button>
            </Form.Item>
        </Form>
    );
}
